<template>
  <gui-page
    ref="pageRef"
    :api-loading-status="apiLoadingStatus"
    :custom-footer="true"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :status-bar-class="['gui-bg-white']"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white gui-border-b" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">意见反馈</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex gui-column gui-padding">
        <!--   数据列表     -->
        <view>
          <!-- IM 消息展示区 -->
          <gui-im-message group="group1" :msgs="msgs" userid="10000" />
          <!-- 底部提交区 -->
          <gui-im-input placeholder="请输入内容" @send-text="sendText" />
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import msgsData from '@/Grace6/demoData/immessages.js'

const pageRef = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(false)
// 用于记录是否有 api 请求正在执行
const apiLoadingStatus = ref<boolean>(false)
const msgs = ref<any>(msgsData.msgs)
// 提交表单
const sendText = (text: string) => {
  console.log('submit', text)
  const msg = {
    group: 'group1',
    uindex: '10000',
    uname: '老兵张嘎',
    contentType: 'txt',
    uface:
      'https://images.unsplash.com/photo-1662695089339-a2c24231a3ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=60',
    content: text,
    date: '刚刚',
  }
  msgs.value.push(msg)
  pageScroll()
}
const pageScroll = () => {
  setTimeout(() => {
    uni.pageScrollTo({
      scrollTop: 999999 + Math.random(),
      duration: 100,
    })
  }, 200)
}
</script>

<style scoped>
/deep/ .gui-im-bg {
  background: unset;
}
</style>
